import React, { useEffect, useState } from 'react';
// import VirtualTable from './VirtualTable';
import SSE from './SSE';
// import WebSocket from './WebSocket';

export default function Others() {
  const [id, setId] = useState('1000');

  function wait(ms) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(ms);
      }, ms);
    });
  }

  useEffect(() => {
    let didCancel = false;

    async function fetchData() {
      console.log('💩💩💩 => fetchData => id', new Date().toLocaleTimeString(), id);
      await wait(id);
      // 如果 didCancel 为 true 说明用户已经取消了
      console.log('didCancel', didCancel);
      if (!didCancel) {
        // todo setState
      }
    }

    fetchData();

    // 执行下一个 effect 之前会执行
    return () => {
      didCancel = true;
    };
  }, [id]);

  return (
    <div>
      {/* <VirtualTable /> */}
      {/* <SSE /> */}
      {/* <WebSocket /> */}
      {/* <button type="button" onClick={() => setId(id === 3000 ? 1000 : 3000)}>
        设置id
      </button> */}
    </div>
  );
}
